<template>
<div class="full-screenn">
    <div class="artistic1">
      <span>Your location:</span><br />
      <span class="art">编辑页面</span>
    </div>
<!-- 提交时把整个表单提交 -->
  <form @submit.prevent="updateUser()" class="foem1">
    <div class="mb-3">
      <label for="username" class="form-label">用户名：</label>
      <input
        type="text"
        class="form-controlq"
        id="username"
        placeholder="请修改用户名"
        v-model="edituser.username"
      />
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">密码：</label>
      <input
        type="text"
        class="form-controlq"
        id="password"
        placeholder="请修改密码"
        v-model="edituser.password"
      />
    </div>
    <div class="mb-3">
      <label for="sex" class="form-label">性别：</label>
      <input
        type="text"
        class="form-controlq"
        id="sex"
        placeholder="请修改性别"
        v-model="edituser.sex"
      />
    </div>
    <div class="mb-3">
      <label for="phone" class="form-label">电话：</label>
      <input
        type="text"
        class="form-controlq"
        id="phone"
        placeholder="请修改电话"
        v-model="edituser.phone"
      />
    </div>
    <button  class="btn btn-warning">提交</button>
  </form>
</div>

</template>

<script>
import {http} from '../../utils/http.js'
export default {
  data(){
    return{
      //随便定义一个来接受MyArticle里的编辑数据
      edituser:{}
    }
  },
  //MyArticle拿到编辑数据
   created(){
    this.edituser=JSON.parse(this.$route.query.userInfo)
 

},

 methods:{
    updateUser(){
      //是个对象，所以把数据都传过去
      http.post("/update",this.edituser)
      .then(res=>{
        if(res.status===200){
          alert("更新成功");
        }else{
          alert("更新失败");
        }
        //回到路由
        this.$router.push("/user");
      })
    }
  }


};
</script>

<style scoped>
/* 背景图片 */
.full-screenn {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/21.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; /* 确保内容在上面 */
  /* 可能需要额外的样式来确保内容可以显示在上面 */
}

/* 表单样式 */
.foem1 {
  /* 设置表单的尺寸、边框和位置 */
  width: 800px;

  border: 3px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使表单居中 */
  box-sizing: border-box; /* 确保边框和内边距不会增加元素的总宽度和总高度 */
  padding: 20px; /* 添加一些内边距以避免内容直接贴在边框上 */
}

.boox {
  /* 设置输入框容器的样式，如需要可以添加更多样式 */
  height: 50px;
  margin-bottom: 15px; /* 输入框之间的间隔 */
}

label {
  /* 设置标签的样式，如需要可以添加更多样式 */
  display: block; /* 使标签独占一行 */
  margin-bottom: 3px; /* 标签与输入框之间的间隔 */
}

.btn {
  /* 如果需要，可以设置提交按钮的样式 */
  margin-top: 5px;
}

/* 顶部英文 */
.artistic1 {
  position: fixed; /* 固定在视口上 */
  top: 0; /* 距离顶部0px */
  left: 0; /* 距离左侧0px */
  color: rgb(225, 16, 16); /* 设置文字颜色为白色 */
  font-style: italic; /* 设置文字为斜体 */
  font-size: 30px; /* 设置字号为28px */

  letter-spacing: 2px; /* 设置字间距为2px */
  padding-top: 20px;
  padding-left: 50px;
}
.art {
  padding-left: 300px;
}
</style>